@extends('backend.layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('/backend/js/ztree/css/metroStyle/metroStyle.css')}}">
@endsection

@section('content')
<div class="layui-card">
    <div class="layui-card-header layui-card-header-auto">为角色分配权限</div>
    <div class="layui-card-body">
        <form class="layui-form" action="{{route('admin.auth.role.permission.save',['id'=>$id])}}" method="POST">
            {{method_field('put')}}
            @csrf
            <input type="hidden" id="modules" value="" name="modules" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">分配权限</label>
                <div class="layui-input-block">
                    <ul class="ztree" id="moduleTree"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="formDemo">确 认</button>
                    <a class="layui-btn" href="{{route('admin.auth.role.index')}}">返 回</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript" src="{{asset('/backend/js/ztree/js/jquery.ztree.all.js')}}"></script>
<script type="text/javascript">
    layui.use(['layer', 'table', 'form'], function () {
        let zTreeObj;
        $.ajax({
            url: "{{route('admin.auth.role.getModules',['id'=>$id])}}",
            success: function (data) {
                zTreeObj = $.fn.zTree.init($("#moduleTree"), {
                    check: {
                        enable: true,
                        autoCheckTrigger: true,
                        chkStyle: "checkbox",
                        chkboxType: {
                            "Y": "ps",
                            "N": "ps"
                        }
                    },
                    callback: {
                        onCheck: function (event, treeId, treeNode) {
                            let treeObj = $.fn.zTree.getZTreeObj("moduleTree");
                            let nodes = treeObj.getCheckedNodes(true);
                            var modules = [];
                            for (var i = 0; i < nodes.length; i++) {
                                modules.push(nodes[i].label);
                            }
                            $("#modules").val(modules)
                        }
                    }
                }, data);
            }
        });
    });

</script>
@endsection